<template lang="html">
  <div class="update">
    <!-- <h2 class="tit1">上传身份证照片</h2> -->
    <div class="wpr">
      <el-steps :active="active"  align-center finish-status="success">
        <!-- <el-step title="上传身份证照片"></el-step> -->
        <el-step title="完善个人信息"></el-step>
        <el-step title="绑定银行卡"></el-step>
      </el-steps>
      <!-- <transition name="fade">
        <Step1  @sonEmite="next" v-if="status[0]" />
      </transition> -->
      <transition name="fade">
        <Step2  @sonEmite="next" v-if="status[0]" />
      </transition>
      <transition name="fade">
        <Step3  @sonEmite="next" v-if="status[1]" />
      </transition>
    </div>
  </div>
</template>

<script>
// import Step1 from './step1';
import {MessageBox ,Steps, Step} from 'element-ui'
export default {
  components:{
    // Step1,
    Step2:s => require.ensure([],()=>s(require('./step2')),'step2'),
    Step3:s => require.ensure([],()=>s(require('./step3')),'step3'),
    elSteps:Steps,
    elStep:Step
  },
  data() {
     return {
       active: 0,
       status:[true,false]
     };
   },
   mounted(){
     this.setTit('上传身份信息')
   },
   methods: {
     next() {
       if (this.active++ > 1) this.active = 0;
       let arr = [false,false];
       arr[this.active] = true;
       this.status = arr;
     }
   }
}
</script>

<style lang="scss">
.update{
  .wpr{margin-top:.6rem}

  // .el-step__icon{color:#fff;background-color:#ccc;border-color: #ccc;}
  // .is-process .el-step__icon{background-color:#f5cc3f;border-color: #f5cc3f;}
  .is-process .el-step__icon{background-color: #f7ce2b}
  .el-step__head.is-process{color:#fff;border-color: #f7ce2b}
.el-steps{
  border-bottom: 1px #efefef solid;padding-bottom: .28rem;margin:0 .2rem .2rem;
}
.fade-enter-active, .fade-leave-active {
    transition: opacity .5s
  }
.fade-enter, .fade-leave-to /* .fade-leave-active 在低于版本 2.1.8 中 */ {
    opacity: 0
  }
}
</style>
